<template>
<li>
    <completed-todo
        :item="item"
        @toggle-completed="toggleCompleted"
    ></completed-todo>
    <todo-content
        :item="item"
    ></todo-content>
    <remove-todo
        :item="item"
        @remove-todo-item="removeTodoItem"
    ></remove-todo>
</li>
</template>

<script>

import CompletedTodo from "./CompletedTodo.vue"
import RemoveTodo from "./RemoveTodo.vue"
import TodoContent from './TodoContent.vue'

export default {
    name: 'TodoItem',
    components: {
        CompletedTodo,
        RemoveTodo,
        TodoContent
    },
    props: ['item'],
    methods: {
        toggleCompleted(id) {
            this.$emit('toggleCompleted', id);
        },
        removeTodoItem(id) {
            this.$emit('removeTodoItem', id);
        }
    }
    
}
</script>

<style>

</style>